import React, { Component } from "react";
import "./css/014-props.css";
import Discover from "./propsComponents/Discover";
import First from "./propsComponents/First";
import Mine from "./propsComponents/Mine";

export default class App extends Component {
  state = {
    list: [
      {
        id: 1,
        name: "首页",
      },
      {
        id: 2,
        name: "发现",
      },
      {
        id: 3,
        name: "我的",
      },
    ],
    activeIndex: 0,
  };
  render() {
    return (
      <section>
        <ul>
          {this.state.list.map((item, index) => (
            <li
              className={this.state.activeIndex == index ? "active" : ""}
              key={item.id}
              onClick={() => this.handleClick(index)}
            >
              {item.name}
            </li>
          ))}
        </ul>
        <div className="content">{this.tabsFn()}</div>
      </section>
    );
  }
  handleClick = (index) => {
    this.setState({
      activeIndex: index,
    });
  };
  tabsFn = () => {
    if (this.state.activeIndex == 0) {
      return <First />;
    } else if (this.state.activeIndex == 1) {
      return <Discover />;
    } else {
      return <Mine />;
    }
  };
}
